<template>
  <VScaleScreen width="4160" height="1080">
    <div id="index">
      <!-- 头部 -->
      <Head></Head>
      <div class="main">
        <div class="left">
          <!-- 大宗采购贸易商城 -->
          <BulkPurchases></BulkPurchases>
          <!-- 零星商品采销商城 -->
          <SporadicCommodity></SporadicCommodity>
        </div>
        <!-- 平台交易数据动态 -->
        <PlatformTransaction></PlatformTransaction>

        <!-- 地图 -->
        <div class="map">
          <Map></Map>
        </div>

        <div class="right">
          <!-- 供应链金融服务 -->
          <FinancialService></FinancialService>
          <!-- 劳务撮合版块 -->
          <LaborPooling></LaborPooling>
        </div>
        <div class="right">
          <!-- 基础平台 -->
          <BasePlatform></BasePlatform>
          <!-- 工人培训 -->
          <WorkerTraining></WorkerTraining>
        </div>
      </div>
    </div>
  </VScaleScreen>
</template>

<script setup>
import VScaleScreen from "v-scale-screen";
import Head from "./components/head.vue";
import BulkPurchases from "./components/bulkPurchases";
import SporadicCommodity from "./components/sporadicCommodity";
import PlatformTransaction from "./components/platformTransaction.vue";
import FinancialService from "./components/financialService.vue";
import LaborPooling from "./components/laborPooling.vue";
import WorkerTraining from "./components/workerTraining.vue";
import BasePlatform from "./components/basePlatform.vue";
import Map from "./components/map.vue";
</script>

<style scoped lang='scss'>
#index {
  width: 4160px;
  height: 1080px;
  background-color: #000;

  .main {
    display: flex;
    justify-content: space-between;
    padding: 0 40px;
    padding-top: 27px;
    box-sizing: border-box;

    .left {
      width: 740px;
      height: 900px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background: linear-gradient(
        90deg,
        #001c24 0%,
        rgba(0, 16, 22, 0.02) 100%
      );
    }
    .map {
      width: 1229px;
      height: 1px;
    }
    .right {
      width: 620px;
      height: 900px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
}
</style>